:root {--color: #D1CDC7}

body {
    background-color: #181A1B;
    color: var(--color);
    min-height: 100vh;
    flex-direction: column;
    display: flex
}

section    {flex-grow: 1}
a          {text-decoration: none}
.row       {padding-bottom: 15px}
.container {padding-top: 10px}
.table     {color: var(--color)}
.rules img {width: 45%}

@media screen and (max-width: 800px) {
    .table_wrapper {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .rules img  {width: 100%}
}

thead, tr {padding: 10px 15px}
thead     {font-weight: bold; background: black}
th, td    {border: none}

tr:nth-child(even) {background: black}

td:first-child, th:first-child {border-radius: 8px 0 0 8px}
td:last-child, th:last-child   {border-radius: 0 8px 8px 0}

tr img    {height: 30px}
.photo    {height: 10rem}
.invert   {filter: invert(75%)}
.negative {filter: invert(1)}

.rules {padding: 15px 0}

.link       {color: var(--bs-link-color)}
.link:hover {color: var(--bs-link-hover-color)}

.button:hover, .link:hover {cursor: pointer}

.hide {display: none}

footer {flex-shrink: 0}